<template>
      <div class="mapCon" :style="mapStyle"  id="map"></div>
</template>
<script>
import echarts from "echarts";
require("echarts/map/js/china.js");
require("echarts/dist/extension/bmap.min.js");
import chart from "@/components/Charts/chart";
// mapStyle: 地图的style 样式  ，value: 可用 v-model 传入路线数据数组数据  placeData: 地点数组
/** placeData = [
          {
            name: "广州",
            value: [113.72, 23.13, 20],
          },]
           */
export default {
  name: "index",
  props: {
    mapStyle: {
      type: String,
      default: () => {
        return "";
      }
    },
    hoverObj: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  components: { chart },
  watch: {
    hoverObj(res) {
      this.fetchMap(res);
    }
  },
  data() {
    return {
      mapOption: {}, // 地图option
      linesData: [], // 线路坐标
      cityArr: [], // 地点坐标
      areaDatas: [] // 区域的坐标
    };
  },
  methods: {
    fetchMap(placeData) {
      var startPoint = {
        x: 112.4291669108153,
        y: 34.66399962065898
      };
      // 地图自定义样式
      var bmap = {
        center: [startPoint.x, startPoint.y],
        zoom: 12,
        roam: false,
        mapStyle: {
          styleJson: [
            {
              featureType: "water",
              elementType: "all",
              stylers: {
                color: "#021019"
              }
            },
            {
              featureType: "highway",
              elementType: "geometry.fill",
              stylers: {
                color: "#000000"
              }
            },
            {
              featureType: "highway",
              elementType: "geometry.stroke",
              stylers: {
                color: "#147a92"
              }
            },
            {
              featureType: "arterial",
              elementType: "geometry.fill",
              stylers: {
                color: "#000000"
              }
            },
            {
              featureType: "arterial",
              elementType: "geometry.stroke",
              stylers: {
                color: "#0b3d51"
              }
            },
            {
              featureType: "local",
              elementType: "geometry",
              stylers: {
                color: "#000000"
              }
            },
            {
              featureType: "land",
              elementType: "all",
              stylers: {
                color: "#08304b"
              }
            },
            {
              featureType: "railway",
              elementType: "geometry.fill",
              stylers: {
                color: "#000000"
              }
            },
            {
              featureType: "railway",
              elementType: "geometry.stroke",
              stylers: {
                color: "#08304b"
              }
            },
            {
              featureType: "subway",
              elementType: "geometry",
              stylers: {
                lightness: -70
              }
            },
            {
              featureType: "building",
              elementType: "geometry.fill",
              stylers: {
                color: "#000000"
              }
            },
            {
              featureType: "all",
              elementType: "labels.text.fill",
              stylers: {
                color: "#857f7f"
              }
            },
            {
              featureType: "all",
              elementType: "labels.text.stroke",
              stylers: {
                color: "#000000"
              }
            },
            {
              featureType: "building",
              elementType: "geometry",
              stylers: {
                color: "#022338"
              }
            },
            {
              featureType: "green",
              elementType: "geometry",
              stylers: {
                color: "#062032"
              }
            },
            {
              featureType: "boundary",
              elementType: "all",
              stylers: {
                color: "#1e1c1c"
              }
            },
            {
              featureType: "manmade",
              elementType: "geometry",
              stylers: {
                color: "#022338"
              }
            },
            {
              featureType: "poi",
              elementType: "all",
              stylers: {
                visibility: "off"
              }
            },
            {
              featureType: "all",
              elementType: "labels.icon",
              stylers: {
                visibility: "off"
              }
            },
            {
              featureType: "all",
              elementType: "labels.text.fill",
              stylers: {
                color: "#2da0c6",
                visibility: "on"
              }
            }
          ]
        }
      };
      var geoCoordMap = {
        瀍河区: [112.5173968324, 34.7099997538],
        老城区: [112.4760643831, 34.6896335966],
        西工区: [112.4346888458, 34.6669038323],
        洛龙区: [112.4704671537, 34.624888858]
      };
      var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
        return res;
      };
      var option = {
        bmap: bmap,
        tooltip: {
          trigger: "item",
          position: "top",
          extraCssText: "text-align:center;background-color:transparent",
          // 门店经纪人数和门店数量
          formatter: function(params) {
            var name = params.name;
            var value = "";
            if (typeof params.value[2] === "undefined") {
              value = params.value;
            } else {
              value = params.value[2];
            }
            var minResult = "";
            var minItem =
              '<div style="display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:0 10px"><span>' +
              name +
              '</span><span style="margin-top:2px;font-family:DIN Condensed Bold;font-size:20px">' +
              value +
              "</span></div>";
            minResult = minItem;
            var imgConStart =
              '<div style="display:flex;padding:12pt 12pt 12pt 12pt;color:#31cee6;flex-direction:column;background:rgba(0,0,0,0.7);border-radius:10px">' +
              '<div style="width:100%;display:flex;align-items:center;justify-content:space-between;flex-direction:row;margin-top:8pt">';

            var result =
              minResult === ""
                ? imgConStart + "</div>"
                : imgConStart + minResult + "</div>";
            return result;
          }
        },
        series: {
          type: "effectScatter",
          coordinateSystem: "bmap",
          data: convertData(placeData),
          rippleEffect: {
            brushType: "stroke"
          },
          showEffectOn: "render",
          label: {
            normal: {
              formatter: "{b}",
              position: "right",
              show: true
            }
          },
          symbolSize: function(val) {
            return 30;
          },
          itemStyle: {
            normal: {
              color: "#2ff0d2"
            }
          }
        }
      };
      var self = this;
      self.mapChart = echarts.init(document.getElementById("map"));
      self.mapChart.setOption(option);
      self.mapChart.on("click", function(params) {
        self.$emit("on-map", params.name);
      });
    }
  }
};
</script>
<style scoped>
.mapCon {
  height: 390px;
  min-width: 642px;
  right: 10px;
  position: fixed;
  top: 10px;
}
</style>
